<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框杀杀杀
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="userFormData" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="userFormData.userName" clearable placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="userFormData.loginName" clearable placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="userFormData.email" clearable placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="userFormData.phone" clearable placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="quere()">查询</el-button>
                    <el-button type="primary" @click="addUser()">添加</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="姓名">
                                    <span>{{ props.row.userId}}</span>
                                </el-form-item>
                                <el-form-item label="昵称">
                                    <span>{{ props.row.loginName }}</span>
                                </el-form-item>
                                <el-form-item label="手机号">
                                    <span>{{ props.row.phonenumber }}</span>
                                </el-form-item>
                                <el-form-item label="email">
                                    <span>{{ props.row.email }}</span>
                                </el-form-item>
                                <el-form-item label="创建时间">
                                    <span>{{ props.row.createTime }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="userId"
                            label="编号"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="avatar"
                            label="头像"
                            align="center">
                        <template slot-scope="scope">

                            <el-avatar shape="square" :size="100" fit="fill" :src="scope.row.avatar"></el-avatar>
<!--                            <img :src="scope.row.avatar" width="80px" height="60px">-->
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="账号"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="loginName"
                            label="昵称">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="phonenumber"
                            label="手机号">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="email"
                            label="邮箱">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="status"
                            label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    active-value="0"
                                    inactive-value="1"
                                    inactive-color="#ff4949"
                                    @change="changestutes(scope.row.userId,scope.row.status)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="updateTime"
                            label="修改时间">
                    </el-table-column>

                    <el-table-column label="操作"  width="200"  align="center">
                        <template slot-scope="scope">
                            <el-popconfirm
                                    confirm-button-text='确定'
                                    cancel-button-text='取消'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="您确定要初始化该用户密码？"
                                    @confirm=resetById(scope.row.userId)>
                                <el-button type="danger" icon="el-icon-refresh-left" circle
                                           slot="reference"></el-button>
                            </el-popconfirm>
                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="updatauser(scope.row.userId)"></el-button>
                            <el-popconfirm
                                    confirm-button-text='好的'
                                    cancel-button-text='不用了'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="确定要删除该账户么？"
                                    @confirm=deleteUserbyId(scope.row.userId)
                            >
                                <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                            </el-popconfirm>
                            <el-button type="warning" icon="el-icon-star-off" circle
                                       @click="showUserRole(scope.row.userId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--            分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </el-card>
        <!--分配角色的弹出框-->
        <el-dialog
                title="分配用户角色"
                :visible.sync="see"
                width="30%"
                :before-close="handleClose">
            <el-checkbox-group v-model="userRole">
                <el-checkbox border v-for="role in roleAll" :label="role.roleId" :key="role.roleId">{{role.roleName}}
                </el-checkbox>
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
            <el-button @click=" see=false">取 消</el-button>
            <el-button type="primary" @click="confirmsetrole()">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="用户信息"
                   :visible.sync="status"
                   width="30%"
                   :before-close="handleClose">
            <UpdatandAdd :userId="userId" v-model="status" :key="timer"></UpdatandAdd>
        </el-dialog>
    </div>
</template>

<script>
    import UpdatandAdd from '../../components/system/UserAddOrUpdata'

    export default {
        components: {

            UpdatandAdd
        },
        name: "User",
        data() {
            return {
                timer: '',
                hackSet: false,
                status: false,
                see: false,
                //条件搜索对象
                userFormData: {},
                //表格数据
                tableData: [],
                //每页显示的条数
                pageSize: 5,
                //当前的显示的页码
                currentPage: 1,
                //总条数
                total: 0,
                roleAll: {},
                userRole: [],
                userId: ''
            }
        },
        created() {
            this.initUserTable()
        },
        methods: {
            initUserTable() {
                var that = this;
                this.$http.post(`/system/user/initUerTable/${this.currentPage}/${this.pageSize}`, this.userFormData).then(function (resp) {
                    that.tableData = resp.data.result.records;
                    that.total = resp.data.result.total;

                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //充值用户密码
            resetById(userid) {
                var that = this
                this.$http.get(`system/user/resetbyid/${userid}`).then(function (response) {
                    that.$message.success(response.message)
                })
            },
            changestutes(userid, status) {
                var that = this;
                this.$http.get(`/system/user/updataUserStatus/${userid}/${status}`).then(function (response) {
                    that.$message.success(response.data.message);
                    that.initUserTable()
                });
            },
            quere() {
                this.initUserTable()
            },//更新用户信息
            updatauser(Id) {
                this.userId = Id
                this.status = true
                this.upcomen()
            },
            //重新渲染组件
            upcomen() {
                this.timer = new Date().getTime()//创新刷新组件问题
            },
            addUser() {
                this.userId = ''
                this.status = true
                this.upcomen()
            },
            closewindow() {
                this.timer = new Date().getTime()//创新刷新组件问题
                this.userId = Id
                this.status = true
            },

            showUserRole(uerId) {
                this.userId = uerId
                this.see = true;
                var that = this;
                this.$http.get("system/role/showUserRole/" + uerId).then(function (resp) {
                    that.roleAll = resp.data.result.roleAll;
                    that.userRole = resp.data.result.userRole;

                });

            },
            deleteUserbyId(userId) {
                var that = this;
                this.$http.delete(`system/user/deleteuserbyid/${userId}`).then(function (response) {
                    that.initUserTable();
                    that.$message.success(response.data.message);
                });
            },//修改用户角色
            confirmsetrole() {
                var that = this;
                this.$http.get("/system/role/confirmsetrole?userRoleIds=" + this.userRole + "&userId=" + this.userId).then(function (resp) {
                    that.see = false;
                });
            },
            //当改变没有显示的条数时触发该方法
            handleSizeChange(v) {
                this.pageSize = v;
                this.currentPage();
            },

            //切换页码时触发该方法
            handleCurrentChange(v) {
                this.currentPage = v;
                this.initUserTable();
            }
        }
    }
</script>
<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>